<script setup>
	import MoviesPage from './cpns/moviesPage.vue'
	import DianshiPage from './cpns/dianshiPage.vue'
	import ZongyiPage from './cpns/zongyiPage.vue'
	import DongmanPage from './cpns/dongmanPage.vue'
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'

	// 头部参数
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const CustomBar = 100
	const NavBar = CustomBar + safeAreaInsets?.top

	const metaList = ref([{
			title: '电影'
		},
		{
			title: '电视剧'
		},
		{
			title: '综艺'
		},
		{
			title: '动漫'
		}
	])
	const keywords = ref('')
	// 当前选中
	const TabCur = ref(0)
	const tabSelect = (index) => {
		TabCur.value = index
	}
	const search = () => {
		uni.navigateTo({
			url:'/pages/search/searchList?keywords=' + keywords.value
		})
	}
	const toHistory = () => {
		uni.navigateTo({
			url:'/pages/history/history'
		})
	}
</script>
<template>
	<view class="bg-drab nav fixed">
		<view class="header">
			<view :style="{ height: safeAreaInsets?.top + 'px' }"></view>
			<view class="cu-bar" :style="[{ height: CustomBar + 'rpx' }]">
				<view class="content text-bold">
					莹赢影视
				</view>
			</view>
		</view>
		<view class="cu-bar">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入关键字进行搜索" v-model="keywords" @keyup.enter="search" confirm-type="search" @confirm="search"/>
			</view>
			<view style="width: 80rpx;" @tap="toHistory()">
				<text class="cuIcon-timefill text-beige" style="font-size:42rpx;"></text>
			</view>
		</view>
		<view class="home-nav metaList" style="font-size:28rpx;">
			<block v-if="metaList.length>0">
				<scroll-view scroll-x class="nav" scroll-with-animation>
					<view class="cu-item" :class="index==TabCur?'text-beige cur':''" v-for="(item,index) in metaList"
						:key="index" @tap="tabSelect(index)">
						{{item.title}}
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
	<view :style="[{ padding: NavBar + 50 + 'px 10px 0px 10px' }]"></view>
	<block v-if="TabCur == 0">
		<movies-page></movies-page>
	</block>
	<block v-if="TabCur == 1">
		<dianshi-page></dianshi-page>
	</block>
	<block v-if="TabCur == 2">
		<zongyi-page></zongyi-page>
	</block>
	<block v-if="TabCur == 3">
		<dongman-page></dongman-page>
	</block>
</template>



<style lang="scss">
	.metaList {
		padding: 0px 20rpx;
	}

	.home-nav.metaList {
		// position: fixed;
		// left: 0px;
		width: 100%;
		z-index: 300;
		// background-color: #fff;
	}

	.home-nav.metaList .nav {
		width: 100%;
	}

	.home-nav.metaList .nav .cu-item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0upx 30rpx;
	}
</style>